<template>
  <div class="son">
      <h4>son.vue</h4>
      <button @click="fn1">修改父组件传递过来的msg</button>
      <button @click="fn2">修改父组件传递过来的obj里的name</button>
      <button @click="fn3">修改父组件传递过来的obj的指向</button>

      <!-- 以下按钮才是真正子传父 -->
      <button @click="fn4">修改msg</button>  
      <p>父传过来的值是 -- {{ msg }} </p>
      <p>父传过来的oo是 -- {{ oo }}</p>
      <p>父传过来的obj是 -- {{ obj }}</p>
  </div>
</template>

<script>
export default {
    // 找父组件要msg
    // props里声明的属性也可以当data里的属性使用
    // 所以data里的属性可以用插值语法，那么props里的也可以用
    props: ['msg', 'oo', 'obj'],

    methods: {
        fn1 () {

            this.msg = '鸡杀马'
        },

        fn2 () {

            this.obj.name = 'rose'
        },

        fn3 () {

            this.obj = {
                name: 'rose',
                age: 99
            }
        },

        fn4 () {
            // 通知父修改数据
            this.$emit('changeMsg', '正宗泰国马杀鸡，利群代言')
        }
    }
}
</script>

<style scoped>

.son {

    width: 320px;
    height: 260px;
    background-color: #f00;
}

</style>